<template>
  <div class="department-container">
    <div class="app-container">
      <el-card>
        <!-- 用一个行列布局 -->
        <el-row type="flex" justify="space-between" align="middle" style="height: 40px">
          <el-col :span="20">
            <svg-icon icon-class="home" /><span>江苏传智播客教育科技股份有限公司</span>
          </el-col>
          <el-col :span="4">
            <el-row type="flex" justify="end">
              <!-- 两个内容 -->
              <el-col>负责人</el-col>
              <!-- 下拉菜单 element -->
              <el-col>
                <el-dropdown>
                  <span>
                    操作<i class="el-icon-arrow-down" />
                  </span>
                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item>添加子部门</el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>
              </el-col>
            </el-row>
          </el-col>
        </el-row>
      </el-card>
      <el-tree :data="list" :default-expand-all="true">
        <template v-slot="scope">
          <el-row type="flex" justify="space-between" align="middle" style="height: 40px;width: 100%;">
            <el-col :span="20">
              <svg-icon icon-class="home" /><span>{{scope.data.name}}</span>
            </el-col>
            <el-col :span="4">
              <el-row type="flex" justify="end">
                <!-- 两个内容 -->
                <el-col>{{scope.data.manager}}</el-col>
                <!-- 下拉菜单 element -->
                <el-col>
                  <el-dropdown>
                    <span>
                      操作<i class="el-icon-arrow-down" />
                    </span>
                    <el-dropdown-menu slot="dropdown">
                      <el-dropdown-item @click.native="doAdd(scope.data.id)">添加子部门</el-dropdown-item>
                      <el-dropdown-item @click.native="doDel(scope.data.id)">删除子部门</el-dropdown-item>
                    </el-dropdown-menu>
                  </el-dropdown>
                </el-col>
              </el-row>
            </el-col>
          </el-row>
        </template>
      </el-tree>
      <!-- 弹窗部分 -->
      <el-dialog :visible.sync="showDialog" title="新增 | 编辑 部门">
        <departmentsDialog :pid="curId" @success="doSuccess"></departmentsDialog>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import { getDepartments,delDepartments } from '@/api/departments'
import { arrayToTree } from '@/utils/arrayToTree'
import departmentsDialog from '@/views/departments/departmentDialog.vue'
export default {
  //注册组件
  components: { departmentsDialog },
  data() {
    return {
      // 依赖一份树形数据
      list: [],
      //是否显示弹窗
      showDialog:false,
      //父传子,点击新增,显示被点击的部门id
      curId:''
    }
  },
  methods: {
    //1.加载部门信息
    async loadDepartments() {
      const { data: res } = await getDepartments()
      console.log('部门信息', res.data.depts);
      //删除数组第一个元素
      res.data.depts.shift()
      //将数据绑定到data中
      this.list = arrayToTree(res.data.depts, '')
    },
    //2.新增部门
    doAdd(id){
      console.log(id);
      this.curId=id
      this.showDialog=true
    },
    //3.新增成功,子传父
    doSuccess(){
      //重新加载页面
      this.loadDepartments()
      //关闭弹窗
      this.showDialog=false
    },
    //4.删除部门
   async doDel(id){
     const {data:res} =await delDepartments(id)
     console.log('删除部门',res);
     if(res.code===10000){
      this.$message.success(res.message)
      //刷新页面
      this.loadDepartments()
     }
    }
  },
  created() {
    //获取部门信息
    this.loadDepartments()
  }
}
</script>

<style>

</style>